<!--
 * @Author: 姚杰鸿 adolphus520@163.com
 * @Date: 2024-07-24 16:44:00
 * @LastEditors: 姚杰鸿
 * @LastEditTime: 2025-01-23 17:02:07
 * @Description: file content
-->
<template>
  <el-scrollbar>
    <el-tree
      v-loading="loading"
      :data="data"
      node-key="code"
      default-expand-all
      draggable
      :expand-on-click-node="false"
      class="tree-el-row"
      @node-drop="move"
    >
      <template #default="scope">
        <element-tree-line :node="scope.node" :show-label-line="true">
          <template #default>
            <span class="custom-tree-node">
              <span
                class="custom-tree-node-span"
                @dblclick="edit(scope.node.data)"
              >
                <font-awesome-icon
                  class="icon"
                  :icon="getClasss(scope.node.data.icon)"
                />
                <span style="padding-left: 6px">{{
                  scope.node.data.name
                }}</span>
              </span>
              <span class="tree-operation">
                <el-icon color="green" @click="append(scope.node.data)">
                  <DocumentAdd />
                </el-icon>
                <el-icon color="blue" @click="edit(scope.node.data)">
                  <Edit />
                </el-icon>
                <el-popconfirm
                  title="确认删除菜单节点么？"
                  confirm-button-text="确认"
                  cancel-button-text="取消"
                  @confirm="remove(scope.node, scope.node.data)"
                  @cancel="ElMessage.info('取消删除')"
                >
                  <template #reference>
                    <el-icon color="red">
                      <Delete />
                    </el-icon>
                  </template>
                </el-popconfirm>
              </span>
            </span>
          </template>
        </element-tree-line>
      </template>
    </el-tree>
  </el-scrollbar>
</template>

<script lang="ts" setup>
import { ref, PropType } from "vue";
import type Node from "element-plus/es/components/tree/src/model/node";
import { MenuDeleteApi } from "@/apis/home";
import { ElMessage } from "element-plus";
import type { Menu } from "@/components/elm/ElmMenuEdit.vue";

const props = defineProps({
    data: {
      type: Array as PropType<Menu[]>,
      default: () => [],
    },
    loading: {
      type: Boolean,
      default: true,
    },
  }),
  emit = defineEmits(["edit", "move", "refresh"]),
  append = (data: Menu) => {
    if (data.router.path) {
      ElMessage.warning("页面菜单不能添加子菜单！");
      return;
    }
    emit("edit", {
      code: "",
      pcode: data.code,
      name: "",
      icon: "",
      router: {
        path: "",
        component: "",
      },
      ordernn: 1,
      children: undefined,
    });
  },
  getClasss = (data: string) => {
    if (data) {
      if (data.split(":").length > 1) {
        return data.split(":")[1].split(" ");
      }
    }
    return ["far", "fa-circle"];
  },
  edit = (node: Menu) => {
    emit("edit", node);
  },
  move = (node1: Node, node2: Node, local: string) => {
    emit("move", node1, node2, local);
  },
  remove = (node: Node, data: Menu) => {
    MenuDeleteApi(data)
      .then((res) => {
        if (200 == res.status && 200 == res.data.code) {
          ElMessage.success("删除成功！");
          emit("refresh");
        } else {
          ElMessage.error(res.data.msg);
        }
      })
      .catch((err) => {
        ElMessage.error("删除出现错误！");
      });
  };
</script>

<style scoped>
.tree-el-row {
  padding: 10px 10px 10px 10px;
}

.content-card {
  height: 70vh;
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 18px;
  padding-right: 18px;
}

.custom-tree-node-span {
  width: 100%;
}

.tree-operation {
  margin-left: 10px;
}
</style>

<style lang="scss" scoped>
.icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  color: var(--el-text-color-regular);
  font-size: 20px;
  cursor: pointer;
  text-align: center;
}
</style>
